<!-- src/components/BarGraph.vue： -->

<template>
  <div id="myBarEcharts" :style="{ width: width, height: height }"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { defineExpose, onMounted, onUnmounted, defineProps } from "vue";

let props = defineProps({
  //示例
  width: {
    type: String,
    required: true,
  },
  height: {
    type: String,
    required: true,
  },
  yData: {
    type: Object,
    required: true,
  },
  xData: {
    type: Object,
    required: true,
  },
  title:{
    type: String,
    required: true,
  }
});
let myBarEcharts = echarts;

onMounted(() => {
  initChart(props.xData, props.yData);
});

onUnmounted(() => {
  myBarEcharts.dispose;
});
var app = {};
const posList = [
  "left",
  "right",
  "top",
  "bottom",
  "inside",
  "insideTop",
  "insideLeft",
  "insideRight",
  "insideBottom",
  "insideTopLeft",
  "insideTopRight",
  "insideBottomLeft",
  "insideBottomRight",
];
app.configParameters = {
  rotate: {
    min: -90,
    max: 90,
  },
  align: {
    options: {
      left: "left",
      center: "center",
      right: "right",
    },
  },
  verticalAlign: {
    options: {
      top: "top",
      middle: "middle",
      bottom: "bottom",
    },
  },
  position: {
    options: posList.reduce(function (map, pos) {
      map[pos] = pos;
      return map;
    }, {}),
  },
  distance: {
    min: 0,
    max: 100,
  },
};
app.config = {
  rotate: 0,
  align: "center",
  verticalAlign: "middle",
  position: "top",
  distance: 10,
  onChange: function () {
    const labelOption = {
      rotate: app.config.rotate,
      align: app.config.align,
      verticalAlign: app.config.verticalAlign,
      position: app.config.position,
      distance: app.config.distance,
    };
    myChart.setOption({
      series: [
        {
          label: labelOption,
        },
        {
          label: labelOption,
        },
        {
          label: labelOption,
        },
        {
          label: labelOption,
        },
      ],
    });
  },
};
const labelOption = {
  show: true,
  position: app.config.position,
  distance: app.config.distance,
  align: app.config.align,
  verticalAlign: app.config.verticalAlign,
  rotate: app.config.rotate,
  // formatter: "{c}  {name|{a}}",
  formatter: "{c}次",
  fontSize: "0.06rem",
  rich: {
    name: {},
  },
};
let option = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  title: {
    show: true,
    text: props.title, //主标题文本
    textStyle: {
      color: "black", //'red'，字体颜色
      fontStyle: "normal", //'italic'(倾斜) | 'oblique'(倾斜体) ，字体风格
      fontWeight: "normal", //'bold'(粗体) | 'bolder'(粗体) | 'lighter'(正常粗细) ，字体粗细
      fontFamily: "sans-serif", //'sans-serif' | 'serif' | 'monospace' | 'Arial' | 'Courier New'
      // 'Microsoft YaHei'(微软雅黑) ，文字字体
      fontSize: "0.08rem", //字体大小
      lineHeight: 18, //字体行高
    },  
    textAlign:'auto',//整体（包括 text 和 subtext）的水平对齐
    textVerticalAlign:'auto',//整体（包括 text 和 subtext）的垂直对齐
    padding:0,//[5,10] | [ 5,6, 7, 8] ,标题内边距
    left:'center',//'5' | '5%'，title 组件离容器左侧的距离
    right:'auto',//'title 组件离容器右侧的距离
    top:'auto',//title 组件离容器上侧的距离
    bottom:'3%',//title 组件离容器下侧的距离
  },
  legend: {
    data: ["赛事", "活动", "任务"],
  },
  toolbox: {
    show: false,
    orient: "vertical",
    left: "right",
    top: "center",
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ["line", "bar", "stack"] },
      restore: { show: true },
      saveAsImage: { show: true },
    },
  },
  xAxis: [
    {
      type: "category",
      axisTick: { show: false },
      nameTextStyle: {
        color: "rgba(179, 25, 25, 1)",
      },
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
    },
  ],
  yAxis: [
    {
      type: "value",
    },
  ],
  series: [
    {
      name: "赛事",
      type: "bar",
      barGap: 0,
      label: {
        ...labelOption,
        color: "rgb(232,146,126)",
      },
      emphasis: {
        focus: "series",
      },
      itemStyle: {
        color: "rgb(232,146,126)",
      },
      data: [320, 332, 301, 334, 390, 320, 332, 301, 334, 390, 320, 332],
    },
    {
      name: "活动",
      type: "bar",
      label: {
        ...labelOption,
        color: "rgb(242,216,152)",
      },
      emphasis: {
        focus: "series",
      },
      itemStyle: {
        color: "rgb(242,216,152)",
      },
      data: [220, 182, 191, 234, 290, 220, 182, 191, 234, 290, 220, 182],
    },
    {
      name: "任务",
      type: "bar",
      label: {
        ...labelOption,
        color: "rgb(233,190,156)",
      },
      emphasis: {
        focus: "series",
      },
      itemStyle: {
        color: "rgb(233,190,156)",
      },
      data: [150, 232, 201, 154, 190, 150, 232, 201, 154, 190, 150, 232],
    },
  ],
};
const initChart = (xData, yData) => {
  let chart = myBarEcharts.init(
    document.getElementById("myBarEcharts"),
    "purple-passion"
  );
  chart.setOption(option);
  window.onresize = function () {
    chart.resize();
  };
};
defineExpose({
  initChart,
});
</script>
<style lang="scss" scoped></style>
